﻿@{
    ViewBag.Title = "Products";
}

<h2>WebApi Client Products with Ajax/JQuery in MVC View</h2>

@section scripts
{
    <script type="text/javascript">
    //$alert("Debut");
    var TableHeaderArray = ["ProductID","Name","UnitPrice"];
    $(document).ready(function () {
        $(document).ready(function () {
            var $products = $("#productsection");
            $.ajax({
                type: "GET",
            url: '@(new Uri("http://" + Request.Url.Authority + "/NorthWind/").ToString() + "API/product")',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function (request, status, error) {
                    alert(request.responseText);
                },
                success: function (data) {

                    $.each(data, function (key, val) {

                        $products.append("<tr><td>" + val.productID + "</td><td>" + val.productName + "</td><td>" + val.unitPrice + "</td></tr>");

                    });


                },
            })
        });
    })
    </script>
}
<table class="table table-striped" >
    <thead style=" background-color: #006DCC; color: white;">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>UnitPrice</th>
        </tr>
    </thead>
    <tbody id="productsection"></tbody>
</table>
